<template>
  <div>
    
        <div slot="header" class="clearfix">
            <span class="search">
                <el-select v-model="selected" style="width: 150px">
                <el-option label="按照名称搜索" value="productName"></el-option>
                <el-option label="按照描述搜索" value="productDesc"></el-option>
                </el-select>
                <el-input
                v-model="input"
                placeholder="关键字"
                style="width: 150px"
                ></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </span>
            <el-button
                style="float: right"
                type="primary"
                icon="el-icon-plus"
                size="medium"
                @click="$router.push('/product/addproduct')"
                >添加商品</el-button>
        </div>
      <div class="text item">
      <el-table  :data="list" v-loading="loading" border style="width: 100%">
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="desc" label="商品描述" width="400"></el-table-column>
        
        <el-table-column prop="price" label="商品价格"></el-table-column>

        <el-table-column prop="status" label="商品状态">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="updateProductStatus(scope.row)"
            >{{scope.row.status == 0?'上架':'下架'}}</el-button>
            <el-button type="text" style="font-size:13px">{{scope.row.status == 0?'已下架':'销售中'}}</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="_id" label="操作选项">
          <template slot-scope="scope">
            <el-button size="mini" @click="productDetail(scope.row._id)">详情</el-button>
            <el-button size="mini" @click="productUpdate(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center">
        <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="current_change"
          :page-size="pageSize"
          @next-click="handlenext"
          @prev-click="handleprev"
        >
        </el-pagination>
      </div>

  </div>
</template>
<script>
import {getproduct,updateStatus,searchproduct} from '../api/index'
export default {
    data(){
        return{
            selected:'productName',
            list:[],
            loading:false,
            input:'',
            total:0,
            pageSize:5,
            pageNum:1
        }
    },
    async mounted() {
        let { data } = await getproduct({
            pageNum: 1,
            pageSize: 5,
        });
        this.list=data.data.list
        this.total=data.data.total

  },
  methods:{
      async getproduct() {
        await getproduct({
              pageNum: 1,
              pageSize: 5,
          });
          
    },
    async updateStatus(name,status) {
        let {data}= await updateStatus({
              productId: name,
              status: status,
          });
          this.list=data.data.list
          this.total=data.data.total
    },
    async searchproduct_n(name) {
        let {data}= await searchproduct({
              productName: name,
              pageNum: this.pageNum,
              pageSize: 5,
          });   
          this.list=data.data.list
          this.total=data.data.total
    },
    async searchproduct_d(desc) {
         let {data}= await searchproduct({
              productDesc: desc,
              pageNum: this.pageNum,
              pageSize: 5,
          });   
          this.list=data.data.list
          this.total=data.data.total
    },
    updateProductStatus(row){
        row.status=Number(!row.status)
        this.updateStatus(row._id,row.status)
    },
    search(){
        if(this.selected=='productName'){
            this.searchproduct_n(this.input)
        }else{
            this.searchproduct_d(this.input)
        }
    },
    current_change(val){
          this.pageNum=val
          if(this.selected=='productName'){
             this.searchproduct_n(this.input)
          }else{
              this.searchproduct_d(this.input)
          }
      },
      handlenext(val) {
        this.pageNum=val
          if(this.selected=='productName'){
             this.searchproduct_n(this.input)
          }else{
              this.searchproduct_d(this.input)
          }
      },
      handleprev(val) {
        this.pageNum=val
          if(this.selected=='productName'){
             this.searchproduct_n(this.input)
          }else{
              this.searchproduct_d(this.input)
          }
      },
      productDetail(id){
          this.$router.push({name:"productDetail",params:{id:id}})
      },
      productUpdate(){
        this.$router.push({name:"addproduct",params:{title:"修改商品"}})
      }
  }
  
}
</script>